<template>
  <div class="peican">
    <div class="shang">
      <span class="iconfont icon-fanhui" @click="fantui()"></span>
      <p>活动配餐</p>
      <div class="tou">
        <span class="iconfont icon-dian"></span>
        <div class="zhongjian"></div>
        <span class="iconfont icon-shuangyuanquan"></span>
      </div>
    </div>
    <div class="zhong" v-if="!this.flag">
      <p class="zhongding">温馨提示：大型活动餐，请提前三天进行预订，谢谢支持!</p>
      <div class="xuqiu">
        <h1>请赶快添加你的需求吧</h1>
        <p>
          <span class="iconfont icon-jiayi"></span>立即添加
        </p>
      </div>
    </div>
    <div class="zhong" v-if="this.flag">
      <div class="xuqius">
        <span>
          <h1>用餐人数:{{this.obj.renshu}}人</h1>
          <p>{{this.obj.tianshu}}天</p>
        </span>
        <span>
          <p>{{this.obj.canduan}}</p>
        </span>
        <span>
          <p>{{this.obj.shijiankai}}~{{this.obj.shijianjie}}</p>
        </span>
        <span class="biao">
          <p>{{this.obj.biaozhun}}</p>
        </span>
      </div>
    </div>
    <div class="xia">
      <div class="xiashang">
        <span>
          <p>企业名称</p>
          <input type="text" placeholder="青岛山竹农业有限公司" />
        </span>
        <span>
          <p>公司类型</p>
          <input type="text" placeholder="选择公司类型" />
        </span>
        <span>
          <p>联系电话</p>
          <input type="text" placeholder="17753645615" />
        </span>
        <span>
          <p>联系人名</p>
          <input type="text" placeholder="郭广栋" />
        </span>
      </div>
      <p class="yewuyuan">
        <span class="iconfont icon-ai206"></span> 业务员:400-895-55222
      </p>
    </div>
    <div class="dibu">
      <div class="dibuleft">
        <p>
          预计总金额
          <span>{{this.obj.zongjin===""?'未匹配':this.obj.zongjin}}</span>元/月
        </p>
        <p>*实际费用联系线下业务员</p>
      </div>
      <div class="diburight">
        <p @click="pipei()">匹配定制</p>
      </div>
    </div>
    <XUANZE v-if="flage" @guanbi="guanbis"/>
  </div>
</template>

<script>
import XUANZE from "./xuanze.vue";

export default {
  name: "CATER",
  components: {
    XUANZE
  },
  data() {
    return {
      flag: false,
      obj: {
        jiage: "",
        renshu: "",
        canduan: "",
        biaozhun: "",
        shijiankai: "",
        shijianjie: "",
        tianshu: "",
        zongjin: ""
      },
      flage: false
    };
  },
  methods: {
    tianjia() {
      if (
        this.obj.jiage !== "" &&
        this.obj.renshu !== "" &&
        this.obj.canduan !== "" &&
        this.obj.biaozhun !== "" &&
        this.obj.shijiankai !== "" &&
        this.obj.shijianjie !== "" &&
        this.obj.tianshu !== ""
      ) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    fantui() {
      history.back()
    },
    pipei() {
      if(this.flag===false){
        this.flage = true;
      }
    },
    guanbis(obj){
      this.flage=false
      this.obj=obj
      this.tianjia()
    }
  },
  created() {
    this.tianjia();
  }
};
</script>

<style scoped>
@import url("../../../../../assets/fonts2/iconfont.css");
.peican {
  width: 100vw;
  height: 100vh;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}
.shang {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
.shang > span {
  margin-left: 10px;
}
.ding {
  width: 100%;
  height: 30px;
}
.ding img {
  width: 100%;
  height: 30px;
}
.tou {
  width: 100px;
  height: 30px;
  background: rgba(145, 145, 145);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-right: 10px;
}
.zhongjian {
  width: 1px;
  height: 60%;
  background: #fff;
}
.zhong {
  width: 100%;
  height: 200px;
}
.zhongding {
  width: 100%;
  height: 30px;
  background: red;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
}
.xuqiu {
  width: 90%;
  height: 150px;
  background: rgba(255, 252, 247);
  margin: 20px 5% 0 5%;
  text-align: center;
  border-radius: 10px;
}
.xuqiu h1 {
  font-size: 25px;
  font-weight: 400;
  color: rgba(127, 102, 144);
  line-height: 50px;
  padding-top: 60px;
}
.xuqiu p {
  font-size: 20px;
}
.xuqiu p .icon-jiayi {
  color: blue;
}
.xuqius {
  width: 90%;
  height: 150px;
  background: rgba(255, 252, 247);
  margin: 20px 5% 0 5%;
  text-align: center;
  border-radius: 10px;
}
.xuqius span {
  display: inline-block;
  width: 80%;
  height: 35px;
  margin: 0 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.xuqius span h1 {
  font-size: 20px;
  font-weight: 400;
}
.xuqius span p {
  font-size: 15px;
}
.xuqius .biao {
  display: inline-block;
  width: 80%;
  height: 35px;
  margin: 0 10%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: red;
}
.xia {
  width: 90%;
  height: calc(100% - 270px);
  margin: 0 auto;
}
.xiashang {
  width: 100%;
  height: 250px;
  background: rgba(255, 255, 255);
  margin-top: 10px;
  border-radius: 10px;
  box-shadow: 0 0 2px 1px #f1f1f1;
}
.xiashang span {
  display: inline-block;
  width: 90%;
  height: 40px;
  margin: 10px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.xiashang span input {
  line-height: 40px;
  border: none;
  outline: none;
  text-align: right;
}
.xia .yewuyuan {
  line-height: 50px;
  width: 100%;
  text-align: center;
  font-size: 12px;
}
.dibu {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  border-top: 1px solid #f1f1f1;
}
.dibuleft {
  width: 60%;
  height: 100%;
}
.diburight {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.diburight p {
  width: 120px;
  height: 40px;
  background: rgba(46, 173, 249);
  border-radius: 20px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 40px;
}
.dibuleft p {
  font-size: 13px;
  margin-left: 20px;
  line-height: 30px;
}
.dibuleft p span {
  color: red;
  margin: 0 5px;
}
</style>